/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {View, FlatList} from 'react-native';
import { Icon, Toast } from 'antd-mobile-rn';

// project
import {Page, Content, Header, Row, Between, Hand, Float, ItemY, ItemX, Text, Image, ButtonOpacity, TouchOpacity} from '../../../../library';
import HttpTemp from '../../../../preset/func/http/httptemp';

/******************************************************************************************
 * Component
 ******************************************************************************************/

class AddressItem extends Component {
    constructor (props) { 
        super(props);
        this.Nav = this.props.navigation;
    }

    /**
     * 删除地址
     */
    delete = (id) => {
        HttpTemp.post({
            url:'/page/mytake/logic/delete.php',
            data:{
                id: this.props.id
            },
            success: (res)=> {
                Toast.info('删除成功',3);
                this.props.onDelete();
			}
        })
    }


    render(){
        return(
            <View
                style={{
                    backgroundColor:'#fff',
                    borderRadius:10,
                    borderWidth:1,
                    borderColor:'#f0f0f0',
                    borderBottomWidth:2,
                    borderRightWidth:5,
                    paddingBottom:5,
                    paddingTop:5,
                    margin:10,
                    marginBottom:3
                }}
            >
                <Between pa='5 10'>
                    <Text color='#333' size='14'>{this.props.name}</Text>
                    <Text color='#333' size='14'>{this.props.phone}</Text>
                </Between>
                <Text df bb='1 #f0f0f0' h='50' lh='46' px='10' py='0 5' color='#333' size='16'>{this.props.address}</Text>

                <Between pa='5 10'>
                    {
                        this.props.defaultBool ? (<ButtonOpacity ba='1 #02b349' ra='3' w='40' size='10' color='#02b349'>默认</ButtonOpacity>): (<Text>  </Text>)
                    }
                    <Hand x='right' y='center' pt='2'>
                        <TouchOpacity onPress={(e)=> {
                            this.Nav.navigate('UserSettingAddressEdit', {id: this.props.id});
                        }}>
                            <ItemX mr='10' y='center'>
                                <Image source={require('../../../../assets/edit.png')} w='16' h='20' mr='3'></Image>
                                <Text color='#333' size='14'>编辑</Text>
                            </ItemX>
                        </TouchOpacity>
                        <TouchOpacity onPress={this.delete}>
                            <ItemX mr='10' y='center'>
                                <Image source={require('../../../../assets/delete.png')} w='14' h='16' mr='3'></Image>
                                <Text color='#333' size='14'>删除</Text>
                            </ItemX>
                        </TouchOpacity>
                    </Hand>
                </Between>
            </View>
        )
    }
}


/******************************************************************************************
 * Export
 ******************************************************************************************/

export default class AddressList extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
    constructor (props) {
        super(props);
        this.Nav = this.props.navigation;

        /**
         * state
         */
        this.state = {
          addressL:[]
        };
    }
    

    /*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
    componentDidMount() {
		// SplashScreen.hide();
        this.onShow();
		
    }
    

    /*------------------------------------------------------------------------------------
	 * 自定义方法
     *-----------------------------------------------------------------------------------*/
     /**
      * 调用接口，获取地址列表
      */
    onShow = () => {
        HttpTemp.get({
            url: '/page/mytake/list.php',
            data:{},
			success: (res)=> {
				console.log('成功');
                // console.log(res);
                this.setState({addressL:res.data})
                console.log('this.state.addressL',this.state.addressL)
			}
		});
    }

    /**
     * 
     */
    onChange = (value) => {
        console.log('value',value);
        this.setState({ value:value });
        console.log('this.state.value',this.state.value);
    }

    /**
     * 删除后刷新
     */
    onDelete = ()=> {
        this.onShow();
    }

    /**
     * 此函数用于为给定的item生成一个不重复的key
     */
    keyExtractor = ( item, index ) => item.id;


    /*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
    render(){
        return(
            <Page>
                {/* 此页面背景色为 f8f8f8 */}
                <Content bg='#f8f8f8' mt='48' mb='100'>

                    {
                        // 判断有没有地址 根据 this.state.addressL
                        this.state.addressL.length ? (
                            // 有内容时显示地址列表
                            <FlatList
                                data={this.state.addressL}
                                keyExtractor={this.keyExtractor}
                                renderItem={({item}) => {
                                    return(
                                        <AddressItem onDelete={this.onDelete} id={item.id} name={item.set_name}  phone={item.set_mobile}  address={item.set_address} defaultBool={item.is_defaulted}  />
                                    )
                                }}
                            />
                        ) : (
                            // 没内容时显示提示
                            <View>
                                <Row pt='100' x='center' y='center'>
                                    <ItemY x='center' y='center'>
                                        <Image source={require('../../../../assets/u2809.png')} w='50' h='50' mb='20'></Image>
                                        <Text color='#aeaeae' size='13'>您当前还没有消息</Text>
                                    </ItemY>
                                </Row>
                            </View>
                        )
                    }
                       
                    
                </Content>

                {/* 新建地址按钮 star */}
                <Float pa='15' pt='36' left='50%' bottom='20' ml='-40' w='340'>
                    <ButtonOpacity active={0.6} ra='5' bg='#02b349' f='1' py='10' color='#fff' size='16' onPress={(e)=> {
                        this.Nav.navigate('UserSettingAddressAdd');
                    }}>新建地址</ButtonOpacity>
                </Float>
                {/* 新建地址按钮 end */}

                {/* 顶部 star */}
                <Header h='48' y='center' bg='#fff' style={{ borderBottomColor:"#eee", borderBottomWidth:1 }}>
                    <Between px='10'>
                        <TouchOpacity active={0.6} onPress={(e)=> {
                            this.Nav.goBack()
                        }}>
                            <Icon type='left' size='md' color='#00CC66' />
                        </TouchOpacity>

                        <Text size='17'>收货地址</Text>
                        <Text> </Text>
                    </Between>
                </Header>
                {/* 顶部 star */}
            </Page>
        )
    }
}



